import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {Button, Card,Form, Input,TimePicker ,DatePicker, message} from 'antd';
import {queryRequest,editRequest} from './services';
import moment from 'moment';

const layout = {
  labelCol:{span:6},
  wrapperCol:{span:10}
}

const Index = () => {
  const [form] = Form.useForm();
  useEffect(()=>{
    // queryRequest().then(res => {
    //   console.log(res);
    //   // setConfig(setConfig);
    //   form.setFieldsValue({
    //     n1:res.n1,
    //     n2:res.n2,
    //     n3:res.n3,
    //     n4:moment(res.n4,'HH:mm'),
    //     n5:moment(res.n5,'HH:mm'),
    //     n6:res.n6,
    //     n7:moment(res.n7,'YYYY/MM/DD'),
    //   })
    // })
  },[])

  const handleSubmit = (values:any) => {
    let params = {
        n1:values.n1,
        n2:values.n2,
        n3:values.n3,
        n4:moment(values.n4).format('HH:mm'),
        n5:moment(values.n5).format('HH:mm'),
        n6:values.n6,
        // n7:moment(values.n7).format('YYYY/MM/DD'),
    }
    console.log(params);
    editRequest(params).then(res => {
      if(res.success){
        message.success('修改成功')
      }
    })
  }

  return <PageHeaderWrapper title={false}>
    <Card>
      <Form {...layout} onFinish={handleSubmit} form={form}>
        <Form.Item name='n1' label='本周餐品标题(homeNavTitle1)' rules={[{required:true,message:'请输入本周商品标题'}]}><Input/></Form.Item>
        <Form.Item name='n2' label='下周餐品标题(homeNavTitle2)' rules={[{required:true,message:'请输入下周商品标题'}]}><Input/></Form.Item>
        <Form.Item name='n3' label='下单提示语' rules={[{required:true,message:'请输入下单提示语'}]}><Input/></Form.Item>
        <Form.Item name='n4' label='配餐最早时间' rules={[{required:true,message:'请选择配餐最早时间'}]}>
          <TimePicker format='HH:mm'/>
        </Form.Item>
        <Form.Item name='n5' label='配餐最晚时间' rules={[{required:true,message:'请选择配餐最晚时间'}]}>
          <TimePicker format='HH:mm'/>
        </Form.Item>
        <Form.Item name='n6' label='团购有效期(小时)' rules={[{required:true,message:'请输入团购有效期'}]}>
          <Input style={{width:132}}/>
        </Form.Item>
        {/* <Form.Item name='n7' label='下单日期' rules={[{required:true,message:'请选择下单日期'}]}>
          <DatePicker format='YYYY/MM/DD'/>
        </Form.Item> */}
        <Form.Item wrapperCol={{span:10,offset:6}}>
          <Button type='primary' htmlType='submit'>确认</Button>
        </Form.Item>
      </Form>
    </Card>
  </PageHeaderWrapper>
}

export default Index;